<template>
  <div class="maindataOrganization">
    <el-row class="one_row">
      <el-form :model="requestParam"
               label-width="140px">
        <el-col :span="6">
          <el-form-item label="组织结构名称"> 
            <el-input v-model="requestParam.org_name"
                      placeholder=""></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
            <el-form-item label="组织机构编码">
            <el-input v-model="requestParam.code"
                      placeholder=""></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
            <el-form-item label="上级组织机构名称">
            <el-input v-model="requestParam.p_org_name"
                      placeholder=""></el-input>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <el-row  class="two_row">
      <el-form :model="requestParam"
               label-width="140px">
        <el-col :span="6">
             <el-form-item label="绑定状态">
                 <el-select v-model="requestParam.value" placeholder="请选择" >
                 <el-option
                v-for="item in requestParam.options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
             </el-select>
             </el-form-item>
        </el-col>
        <el-col :span="12" class="time">
            <el-form-item label="同步时间">
              <el-date-picker
                is-range
                v-model="requestParam.timeValue"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                placeholder="选择时间范围">
              </el-date-picker>
          </el-form-item>
        </el-col>      
      </el-form>
    </el-row>
    <el-row class="three_row">
      <el-col :span="6">
        <el-button type="primary" class="bind" @click="ShowBind">批量绑定</el-button>
          <div>
            <el-button type="primary" @click="search">查询</el-button>
            <el-button @click="reset">重置</el-button>
        </div>
    </el-col>
    </el-row>
    <el-table :highlight-current-row="true"
              border
              :header-cell-style="{ background: '#f5f5f5' }"
              :data="tableData.list"
              height="610px">
      <el-table-column prop="serial_number"
                       label="序号"
                       align="center"
                       width="100px"
                       type="index"
                       show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="code"
                       label="组织机构编码"
                       align="center"
                       show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="org_name"
                       label="行政组织名称"
                       align="center"
                       show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="p_org_name"
                       label="上级组织机构名称"
                       align="center"
                       show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="p_org_no"
                       label="上级组织机构编码"
                       align="center"
                       show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="bind_status"
                       label="绑定状态"
                       align="center"
                       show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="bind_time"
                       label="绑定时间"
                       align="center"
                       show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="created_at"
                       label="同步时间"
                       align="center"
                       show-overflow-tooltip>
      </el-table-column>
      <el-table-column label="操作"
                       width="200px"
                       align="center">
        <template slot-scope="scope">
          <el-button type="text" @click="whoopsBind(scope.row)" v-if="scope.row.bind_status=='否'?false:true">取消绑定</el-button>
          <el-button type="text" @click="details(scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @current-change="handlePageChange"
                   @size-change="handleSizeChange"
                   :current-page="requestParam.page"
                   :page-size="requestParam.page_size"
                   layout="total,sizes,prev, pager, next, jumper"
                   background
                   :total="tableData.total_count"
                   align="center">
    </el-pagination>
    <el-dialog title="批量绑定" :visible.sync="dialogTableVisible" width="80%" >
     <div class="Bind">
      <div class="content">
        <div class="mainDate">
          <p class="mainS">主数据组织</p>
          <div class="tree">
            <el-input
              placeholder="输入关键字进行过滤"
              v-model="filterTextMain">
            </el-input>
            <el-tree
              class="filter-tree"
              :data="requestParam.data"
              node-key="code"
              @node-click="getCheckedKeys"
              :props="requestParam.defaultProps"
              :default-expand-all="false"
              :filter-node-method="filterNodeMain"
              ref="treeMain">
            </el-tree>
          </div>
        </div>
        <el-button class="bindRelationship" @click="bind" type="primary">绑定</el-button>
      <div class="platform">
        <p class="platD">平台组织</p>
        <div class="platformContent">
          <el-input
              placeholder="输入关键字进行过滤"
              v-model="filterText">
            </el-input>
            <el-tree
              class="filter-tree"
              :data="requestParam.data2"
              node-key="code"
              @node-click="getCheckedKeys2"
              :props="requestParam.defaultProps2"
              :default-expand-all="false"
              :filter-node-method="filterNode"
              ref="tree">
            </el-tree>
        </div>
      </div>
    </div>
    </div>
  </el-dialog>
  </div>
</template>

<script>
import { BulkManageApi } from "@/services/ResourceCentre";
export default {
  components: {
    
  },
  data () {
    return {
      code:'',
      org_id:'',
      org_name:'',
      org_no:'',
      filterText: '',
      filterTextMain:'',
      dialogTableVisible:false,
      requestParam: {
        org_name:'',
        code:'',
        start_date:'',
        end_date:'',
        bind_status:'',
        p_org_name:'',
        is_page: 1,
        page: 1,
        page_size: 10,
        options: [{
          value: '选项1',
          label: '全部'
        }, {
          value: '1',
          label: '是'
        }, {
          value: '0',
          label: '否'
        }],
        value:'全部',
        timeValue: '',
        show:false,
        data: [],
        data2: [],
        defaultProps: {
          children: 'children_list',
          label: 'org_name'
        },
        defaultProps2: {
          children: 'children_list',
          label: 'org_name'
        },
      },
      resetParam: {
        org_name:'',
        code:'',
        start_date:'',
        end_date:'',
        bind_status:'',
        p_org_name:'',
        is_page: 1,
        page: 1,
        page_size: 10,
        options: [{
          value: '选项1',
          label: '全部'
        }, {
          value: '1',
          label: '是'
        }, {
          value: '0',
          label: '否'
        }],
        value:'全部',
        timeValue: '',
        show:false,
        data: [],
        data2: [],
        defaultProps: {
          children: 'children_list',
          label: 'org_name'
        },
        defaultProps2: {
          children: 'children_list',
          label: 'org_name'
        },
      },
      tableData: {
        list: [],
        page: 1,
        total_count: 0
      }
    };
  },
  methods: {
    // 查询
    search () {
      this.requestParam.page = 1
      this.getData()
    },
    // 重置
    reset () {
      let resetParam = JSON.parse(JSON.stringify(this.resetParam));
      this.requestParam = Object.assign(this.requestParam, resetParam);
      this.getData()
    },
    handlePageChange (page) {
      this.requestParam.page = page
      this.getData()
    },
    // 每页数量
    handleSizeChange(page_size){
      this.requestParam.page_size=page_size;
      this.getData()
    },
    getData () {
      if(this.requestParam.timeValue){
        let moment = require('moment');
        let t1=moment(this.requestParam.timeValue[0]).format('YYYY-MM-DD HH:mm:ss');
        let t2=moment(this.requestParam.timeValue[1]).format('YYYY-MM-DD HH:mm:ss');
        this.requestParam.start_date=t1;
        this.requestParam.end_date=t2;
      }else{
        this.requestParam.start_date='';
        this.requestParam.end_date='';
      }
      if(this.requestParam.value==0||this.requestParam.value==1){
        this.requestParam.bind_status=this.requestParam.value
      }else{
        this.requestParam.bind_status=''
      }
      BulkManageApi.getMaindataOrganization({
        params:{
          code:this.requestParam.code,
          org_name:this.requestParam.org_name,
          p_org_name:this.requestParam.p_org_name,
          bind_status:this.requestParam.bind_status,
          start_date:this.requestParam.start_date,
          end_date:this.requestParam.end_date,
          is_page:this.requestParam.is_page,
          page:this.requestParam.page,
          page_size:this.requestParam.page_size
        }
      }).then(res => {
        if (res.code === 0) {
          for(let i=0;i< res.data.list.length;i++){
            if(res.data.list[i].bind_status==0){
              res.data.list[i].bind_status="否"
            }else{
              res.data.list[i].bind_status="是"
            }
          }
          this.tableData = res.data
          console.log(this.tableData);
        }
      })
      console.log(this.tableData);
    },
    deleteProject () {
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {

        })
        .catch(() => {

        });
    },
    // 批量绑定
    ShowBind(){
      this.dialogTableVisible=true;
      this.requestParam.show=true
      BulkManageApi.getMaindataOrganizationTree({
        params:{
        
        }
      }).then(res => {
        if (res.code === 0) {
          this.requestParam.data=res.data.list
          console.log('批量00000000000',this.requestParam.data);
        }
      })
      BulkManageApi.getMaindataPublicCenterTree({
        params:{
        
        }
      }).then(res => {
        if (res.code === 0) {
          this.requestParam.data2=res.data.list
          console.log(this.requestParam.data);
        }
      })
    },
    filterNodeMain(value, data) {
      console.log(data);
        if (!value) return true;
        return data.org_name.indexOf(value) !== -1;
      },
    filterNode(value, data) {
      console.log(data);
        if (!value) return true;
        return data.org_name.indexOf(value) !== -1;
      },
      // 跳转详情
      details(row){
        this.$router.push({
          name:'主数据池组织架构详情',
          params:{
            requestParam:row
          }
        })
      },
      // 取消绑定
      whoopsBind(row){
        console.log(row);
        BulkManageApi.getMaindataRemoveBindPublicCenter({
        params:{
        code:row.code
        }
      }).then(res => {
        if (res.code === 0) {
         this.reset()
         this.open3()
        }
      })
      },
      // 获取点击树节点信息（主数据组织）
      getCheckedKeys(data){
        this.code=data.code;
        console.log(data.code);
      },
      // 获取点击树节点信息（平台组织）
      getCheckedKeys2(data2){
        this.org_id=data2.org_id
        this.org_name=data2.org_name
        this.org_no=data2.org_no
        console.log(data2.org_id);
        console.log(data2.org_name);
        console.log(data2.org_no);
      },
      open2() {
        this.$message({
          message: '绑定成功',
          type: 'success'
        })},
        open3() {
        this.$message({
          message: '取消成功',
          type: 'success'
        })},
        onBind(){//绑定
          BulkManageApi.getMaindataBindPublicCenter({
          params:{
            jt_code:this.code,
            console_org_id:this.org_id,
            console_org_no:this.org_no,
            console_org_name:this.org_name
          }
      }).then(res => {
        if (res.code === 0) {
          this.code='',
          this.org_id='',
          this.org_no='',
          this.org_name=''
          console.log(res);
          this.open2()
        }
      })
        },
      // 绑定
      bind(){
        if(this.code&&this.org_id){
          this.onBind();
        }else{
        this.$message.warning('请选中左边和右边各一条数据')
        }
      }
  },
  watch: {
    filterTextMain(val){
      this.$refs.treeMain.filter(val);
    },
    filterText(val) {
        this.$refs.tree.filter(val);
      }
    },
  created () {
    // this.getOrgTree()
  },
  mounted () {
    this.getData()
  },
};
</script>

<style scoped lang="scss">
 /deep/ .el-range-separator{
    width: 12% !important;
}
 /deep/ .el-date-editor--datetimerange.el-input__inner{
  width: 258px;
}

.maindataOrganization{
    width: 100%;
    height: 100%;
    padding: 20px;
    position: relative;
    .three_row{
        width: 100%;
        margin-bottom: 20px;
        .el-col{
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
    }
    /deep/ .el-dialog__body{
      width: 100%;
    }
    .Bind{
      width: 100%;
      height: 600px;
      padding: 20px;
      box-sizing: border-box;
      .content{
        display: flex;
        justify-content: space-around;
        align-items: flex-start;
        background-color:white;
        width:100%;
        height: 94%;
        padding: 20px;
        box-sizing: border-box;
        .mainDate{
          width: 40%;
          height: 100%;
          border: 1px solid black;
          box-sizing: border-box;
          // overflow: scroll;
          padding: 20px;
          position: relative;
         .mainS{
          position: absolute;
          top: -20px;
          left: 0px;
         }
         .tree{
          height: 100%;
          overflow-x: hidden;
          overflow-y: scroll;
         }
         
        }
        .bindRelationship{
          display: flex;
          justify-content: center;
          align-items: center;
          width: 8%;
          height: 100%;
          border: 1px solid black;
          box-sizing: border-box;
        }
        .platform{
          width: 40%;
          height: 100%;
          border: 1px solid black; 
          box-sizing: border-box;
          padding: 20px;
          position: relative;
          .platD{
          position: absolute;
          top: -20px;
          left: 0px;
         }
         .platformContent{
          height: 100%;
          overflow-x: hidden;
          overflow-y: scroll;
         }
        }
      }
    }
}
/deep/ .el-select{
  width: 252px;
}
</style>
